import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import { getProductById } from '../../services/product'; // 根据实际情况调整引入路径
import { Spin, Descriptions, Alert, Rate, Avatar, Image, Divider } from 'antd';

const { Item: DescriptionsItem } = Descriptions;

export default function ProductDetail() {
    const { id } = useParams();
    const [product, setProduct] = useState(null);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        const fetchProduct = async () => {
            setLoading(true);
            try {
                const response = await getProductById(Number(id));
                if (response && response.result && response.code === 1) {
                    setProduct(response.result);
                } else {
                    setError('获取商品详情失败');
                }
            } catch (err) {
                setError('获取商品详情失败');
            } finally {
                setLoading(false);
            }
        };

        fetchProduct();
    }, [id]);


    if (loading) {
        return <Spin />;
    }

    if (error) {
        return <Alert message="错误" description={error} type="error" />;
    }

    if (!product) {
        return <Alert message="错误" description="未找到商品" type="error" />;
    }

    return (
        <>
            <Divider orientation="left">商品详情</Divider>
            <Descriptions bordered>
                <DescriptionsItem label="商品ID">{product.id}</DescriptionsItem>
                <DescriptionsItem label="商品名称">{product.productName}</DescriptionsItem>
                <DescriptionsItem label="描述">{product.description}</DescriptionsItem>
                <DescriptionsItem label="分类">{product.category}</DescriptionsItem>
                <DescriptionsItem label="价格">{product.price}</DescriptionsItem>
                <DescriptionsItem label="库存">{product.stock}</DescriptionsItem>
                <DescriptionsItem label="浏览量">{product.views}</DescriptionsItem>
                <DescriptionsItem label="销量">{product.sales}</DescriptionsItem>
                <DescriptionsItem label="参数" span={3}>
                    <ul>
                        {product.parameters.map((param, index) => (
                            <li key={index}>{param}</li>
                        ))}
                    </ul>
                </DescriptionsItem>
                <DescriptionsItem label="服务" span={3}>
                    <ul>
                        {product.services.map((service, index) => (
                            <li key={index}>{service}</li>
                        ))}
                    </ul>
                </DescriptionsItem>
                <DescriptionsItem label="评分" span={3}>
                    <Rate disabled allowHalf defaultValue={product.reviews} />
                </DescriptionsItem>
                <DescriptionsItem label="用户评价" span={3}>
                    {product.userReviews.map((review, index) => (
                        <div key={index} style={{ display: 'flex', alignItems: 'center', marginBottom: '10px' }}>
                            <Avatar src={review.avatar} />
                            <span style={{ marginLeft: '10px' }}>{review.name}</span>
                            <Rate disabled allowHalf defaultValue={review.rating} style={{ marginLeft: '10px' }} />
                            <p style={{ marginLeft: '10px' }}>{review.comment}</p>
                        </div>
                    ))}
                </DescriptionsItem>
            </Descriptions>
        </>
    );
}
